layui.use(['layer', 'jquery'], function() {
    var layer = layui.layer;
    var $ = layui.jquery;
    var close_btn
    var index1;
    //位置
    $('.box_list').eq(0).click(function() {
        var str = "";
        str += "<ul class=inform_form><li><label>姓 名：</label><input type=text placeholder=请输入姓名 /></li>"
        str += "<li><label>电 话：</label><input type=text placeholder=请输入电话 /></li>"
        str += "<li><label>联系地址：</label><textarea placeholder=请输入联系地址></textarea></li>"
        str += "<li class=save_box><button id=close class=layui-btn>关闭</button></li><li class=save_box><button id=save class=layui-btn>保存</button></li></ul>"
        layer.open({
            type: 1,
            title: "提交信息",
            closeBtn: 1, //关闭按钮 0 不显示
            skin: 'layui-demo', //加上边框
            content: str,
            area: ['80%', '80%'],
            shadeClose: true,
            scrollbar: false,
            success: function(layero, index) {
                console.log(index)
                index1 = index;
                return false;
            }
        })
    })

    //订单
    $('.box_list').eq(1).click(function() {
        var str = "";
        str += "<ul class=order_form><li><p>订单编号：6788i6788i6788i</p></li>"
        str += "<li><p>商品名称：德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子</p></li>"
        str += "<li><p>收货地址：德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子</p></li></ul>"
        str += "<ul class=order_form><li><p>订单编号：6788i6788i6788i</p></li>"
        str += "<li><p>商品名称：德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子</p></li>"
        str += "<li><p>收货地址：德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子</p></li></ul>"
        str += "<ul class=order_form><li><p>订单编号：6788i6788i6788i</p></li>"
        str += "<li><p>商品名称：德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子</p></li>"
        str += "<li><p>收货地址：德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子德玛西亚杯子玛西亚杯子玛西亚杯子</p></li></ul>"

        str += "<div class=close_box><button id=close class=layui-btn>关闭</button></div>"
        layer.open({
            type: 1,
            title: "订单信息",
            closeBtn: 1, //关闭按钮 0 不显示
            skin: 'layui-demo', //加上边框
            content: str,
            area: ['80%', '80%'],
            shadeClose: true,
            scrollbar: false,
            success: function(layero, index) {
                console.log(index)
                index1 = index;
                return false;
            }
        })
    })
    //返利
    $('.box_list').eq(2).click(function() {
        var str = "";
        str += "<ul class=fl_form>"
        str += "<li><img src=http://thirdwx.qlogo.cn/mmopen/vi_32/fLcuY32pY0In1UN2cxQWpEJSDKYhS3tqKlFa6AaX4WLPYTCfSNswx950icj3MyicVe39N374opib5bJHeTlBKn07w/132 /><span>恭喜小明之子获得9999元的返利红包！</span></li>"
        str += "<li><img src=http://thirdwx.qlogo.cn/mmopen/vi_32/fLcuY32pY0In1UN2cxQWpEJSDKYhS3tqKlFa6AaX4WLPYTCfSNswx950icj3MyicVe39N374opib5bJHeTlBKn07w/132 /><span>恭喜小明之子获得9999元的返利红包！</span></li>"
        str += "<li><img src=http://thirdwx.qlogo.cn/mmopen/vi_32/fLcuY32pY0In1UN2cxQWpEJSDKYhS3tqKlFa6AaX4WLPYTCfSNswx950icj3MyicVe39N374opib5bJHeTlBKn07w/132 /><span>恭喜小明之子获得9999元的返利红包！</span></li>"
        str += "<li><img src=http://thirdwx.qlogo.cn/mmopen/vi_32/fLcuY32pY0In1UN2cxQWpEJSDKYhS3tqKlFa6AaX4WLPYTCfSNswx950icj3MyicVe39N374opib5bJHeTlBKn07w/132 /><span>恭喜小明之子获得9999元的返利红包！</span></li>"
        str += "<li><img src=http://thirdwx.qlogo.cn/mmopen/vi_32/fLcuY32pY0In1UN2cxQWpEJSDKYhS3tqKlFa6AaX4WLPYTCfSNswx950icj3MyicVe39N374opib5bJHeTlBKn07w/132 /><span>恭喜小明之子获得9999元的返利红包！</span></li>"
        str += "<li><img src=http://thirdwx.qlogo.cn/mmopen/vi_32/fLcuY32pY0In1UN2cxQWpEJSDKYhS3tqKlFa6AaX4WLPYTCfSNswx950icj3MyicVe39N374opib5bJHeTlBKn07w/132 /><span>恭喜小明之子获得9999元的返利红包！</span></li>"
        str += "<li><img src=http://thirdwx.qlogo.cn/mmopen/vi_32/fLcuY32pY0In1UN2cxQWpEJSDKYhS3tqKlFa6AaX4WLPYTCfSNswx950icj3MyicVe39N374opib5bJHeTlBKn07w/132 /><span>恭喜小明之子获得9999元的返利红包！</span></li>"
        str += "<li><img src=http://thirdwx.qlogo.cn/mmopen/vi_32/fLcuY32pY0In1UN2cxQWpEJSDKYhS3tqKlFa6AaX4WLPYTCfSNswx950icj3MyicVe39N374opib5bJHeTlBKn07w/132 /><span>恭喜小明之子获得9999元的返利红包！</span></li>"
        str += "<li><img src=http://thirdwx.qlogo.cn/mmopen/vi_32/fLcuY32pY0In1UN2cxQWpEJSDKYhS3tqKlFa6AaX4WLPYTCfSNswx950icj3MyicVe39N374opib5bJHeTlBKn07w/132 /><span>恭喜小明之子获得9999元的返利红包！</span></li>"
        str += "<li><img src=http://thirdwx.qlogo.cn/mmopen/vi_32/fLcuY32pY0In1UN2cxQWpEJSDKYhS3tqKlFa6AaX4WLPYTCfSNswx950icj3MyicVe39N374opib5bJHeTlBKn07w/132 /><span>恭喜小明之子获得9999元的返利红包！</span></li>"
        str += "<li><img src=http://thirdwx.qlogo.cn/mmopen/vi_32/fLcuY32pY0In1UN2cxQWpEJSDKYhS3tqKlFa6AaX4WLPYTCfSNswx950icj3MyicVe39N374opib5bJHeTlBKn07w/132 /><span>恭喜小明之子获得9999元的返利红包！</span></li>"
        str += "<li><img src=http://thirdwx.qlogo.cn/mmopen/vi_32/fLcuY32pY0In1UN2cxQWpEJSDKYhS3tqKlFa6AaX4WLPYTCfSNswx950icj3MyicVe39N374opib5bJHeTlBKn07w/132 /><span>恭喜小明之子获得9999元的返利红包！</span></li>"
        str += "<li><img src=http://thirdwx.qlogo.cn/mmopen/vi_32/fLcuY32pY0In1UN2cxQWpEJSDKYhS3tqKlFa6AaX4WLPYTCfSNswx950icj3MyicVe39N374opib5bJHeTlBKn07w/132 /><span>恭喜小明之子获得9999元的返利红包！</span></li>"
        str += "</ul><div class=close_box><button id=close class=layui-btn>关闭</button></div>"
        layer.open({
            type: 1,
            title: "返利信息",
            closeBtn: 1, //关闭按钮 0 不显示
            skin: 'layui-demo', //加上边框
            content: str,
            area: ['80%', '80%'],
            shadeClose: true,
            scrollbar: false,
            success: function(layero, index) {
                console.log(index)
                index1 = index;
            }
        })
    })

    $(document).on('click', '#close', function() {
        layer.close(index1)
    });
    //加法
    $('.num_btn_add').click(function() {
        var num = Number($(this).siblings('.num_text').val());
        $(this).siblings('.num_text').val(num + 1)
        console.log($('.num_text').val())
    })
    //减法
    $('.num_btn_sub').click(function() {
        var num = Number($(this).siblings('.num_text').val());
        if(num > 1) {
            $(this).siblings('.num_text').val(num - 1)
            console.log($('.num_text').val())
        } else {
            $('.num_text').val("1")
        }
    })
    $('#btn_open').click(function() {
        if($('#box0').hasClass('add_rotate0')) {
            $('#box0').addClass('remove_rotate0')
            setTimeout(function() {
                $('#box0').animate({
                    height: '1.5rem'
                }, 300).removeClass('add_rotate0')

            }, 300)
            $('#box0').children('.box_list').animate({
                height: '0rem',
                width: '0rem',
                fontSize: '0rem',
                background: "inhert"
            }, 300)
        } else {
            $('#box0').removeClass('remove_rotate0').css('display', 'block')
            $('#box0').animate({
                height: '3rem',
            }, 100, function() {
                $('#box0').addClass('add_rotate0');
            })
            $('#box0').children('.box_list').animate({
                height: '1rem',
                width: '1rem',
                fontSize: '0.24rem',
                background: 'orange'
            }, 300)
        }

        if($('#box1').hasClass('add_rotate1')) {
            $('#box1').addClass('remove_rotate1')
            setTimeout(function() {
                $('#box1').animate({
                    height: '1.5rem'
                }, 300).removeClass('add_rotate1')

            }, 300)
            $('#box1').children('.box_list').animate({
                height: '0rem',
                width: '0rem',
                fontSize: '0rem',
                background: "inhert"
            }, 300)
        } else {
            $('#box1').removeClass('remove_rotate1').css('display', 'block')
            $('#box1').animate({
                height: '3rem'
            }, 100, function() {
                $('#box1').addClass('add_rotate1');
            })
            $('#box1').children('.box_list').animate({
                height: '1rem',
                width: '1rem',
                fontSize: '0.24rem',
                background: 'orange'
            }, 300)
        }

        if($('#box2').hasClass('add_rotate2')) {
            $('#box2').addClass('remove_rotate2')
            setTimeout(function() {
                $('#box2').animate({
                    height: '1.5rem'
                }, 300).removeClass('add_rotate2')

            }, 300)
            $('#box2').children('.box_list').animate({
                height: '0rem',
                width: '0rem',
                fontSize: '0rem'
            }, 300)
        } else {
            $('#box2').removeClass('remove_rotate2').css('display', 'block')
            $('#box2').animate({
                height: '3rem'
            }, 100, function() {
                $('#box2').addClass('add_rotate2');
            })
            $('#box2').children('.box_list').animate({
                height: '1rem',
                width: '1rem',
                fontSize: '0.24rem'
            }, 300)
        }
    })

});


function pay(id) {
    $.ajax({
        url:'/mobile/pay',
        type:'POST', //GET
        async:true,    //或false,是否异步
        data:{
            commodityId:id,
            number:$("#"+id).val()
        },
        timeout:5000,    //超时时间
        dataType:'html',    //返回的数据格式：json/xml/html/script/jsonp/text
        beforeSend:function(xhr){
            /*console.log(xhr)
             console.log('发送前')*/
        },
        success:function(data){
            //console.log(data)
            $("#pay").append(data);
        },
        error:function(xhr,textStatus){
            console.log('错误')
            console.log(xhr)
            console.log(textStatus)
        },
        complete:function(){
            //console.log('结束')
        }
    })
};